<template>
  <div class="DigitalCollationAdd">
    <div class="form-card">
      <div class="card-title">数字著录</div>
      <div class="card-line"></div>
      <!-- <div class="card-steps">
      <ApproveProcess code="A0578" />
    </div> -->
      <!-- <div class="card-tip">
        <img
          src="@/assets/images/meeting_add_tip.png"
          alt=""
        />
        <span>
          {{ hint }}
        </span>
      </div> -->
      <div class="form-content">
        <NScrollbar>
          <NSpin :show="false">
            <n-form
              ref="formRef"
              :model="formModel"
              :rules="rules"
              label-placement="left"
              label-width="auto"
              require-mark-placement="right-hanging"
              class="form-container"
            >
              <div class="top-items">
                <n-form-item
                  label="类型"
                  path="type"
                >
                  <n-select
                    v-model:value="formModel.type"
                    :options="typeOptions"
                  />
                </n-form-item>
                <n-form-item
                  label="著作类型"
                  path="workType"
                >
                  <n-select
                    v-model:value="formModel.workType"
                    :options="workTypeOptions"
                  />
                </n-form-item>
              </div>
              <div class="bottom-items">
                <n-form-item
                  label="著录识别号/条码号"
                  path="identificationNumber"
                >
                  <n-input v-model:value="formModel.identificationNumber" />
                </n-form-item>
                <n-form-item
                  label="主题词"
                  path="subject"
                >
                  <n-input v-model:value="formModel.subject" />
                </n-form-item>
                <n-form-item
                  label="版本名称"
                  path="callNumber"
                >
                  <n-input v-model:value="formModel.callNumber" />
                </n-form-item>
                <n-form-item
                  label="计算机文件名"
                  path="fileName"
                >
                  <n-input v-model:value="formModel.fileName" />
                </n-form-item>
                <n-form-item
                  label="中华版本收藏主体名称"
                  path="collectionName"
                >
                  <n-input v-model:value="formModel.collectionName" />
                </n-form-item>
                <n-form-item
                  label="中华版本收藏主体编码"
                  path="collectionCode"
                >
                  <n-input v-model:value="formModel.collectionCode" />
                </n-form-item>
                <n-form-item
                  label="原始载体"
                  path="originalCode"
                >
                  <n-input v-model:value="formModel.originalCode" />
                </n-form-item>
                <n-form-item
                  label="保管期限"
                  path="retentionPeriod"
                >
                  <n-date-picker
                    v-model:value="formModel.retentionPeriod"
                    type="date"
                  />
                </n-form-item>
                <n-form-item
                  label="密级"
                  path="securityLevel"
                >
                  <n-select
                    v-model:value="formModel.securityLevel"
                    :options="securityLevelOptions"
                  />
                </n-form-item>
                <n-form-item
                  label="来源"
                  path="year"
                >
                  <n-input v-model:value="formModel.year" />
                </n-form-item>
                <n-form-item
                  label="计算机文件大小"
                  path="fileSize"
                >
                  <n-input-number v-model:value="formModel.fileSize" />
                </n-form-item>
                <n-form-item
                  label="著录者"
                  path="cataloger"
                >
                  <n-input v-model:value="formModel.cataloger" />
                </n-form-item>
                <n-form-item
                  label="格式名称"
                  path="fileCount"
                >
                  <n-input v-model:value="formModel.fileCount" />
                </n-form-item>
                <n-form-item
                  label="存储地址"
                  path="storageLocation"
                >
                  <n-input v-model:value="formModel.storageLocation" />
                </n-form-item>
                <n-form-item
                  label="文件数量"
                  path="fileCount"
                >
                  <n-input v-model:value="formModel.fileCount" />
                </n-form-item>
                <n-form-item></n-form-item>
                <n-form-item
                  label="内容描述"
                  path="description"
                >
                  <n-input
                    v-model:value="formModel.description"
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                  />
                </n-form-item>
                <n-form-item
                  label="备注"
                  path="remarks"
                >
                  <n-input
                    v-model:value="formModel.remarks"
                    type="textarea"
                    :autosize="{ minRows: 3, maxRows: 5 }"
                  />
                </n-form-item>
                <n-form-item label="附件图片">
                  <n-upload
                    action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
                    list-type="image-card"
                  >
                    点击或者拖动文件到该区域来上传
                  </n-upload>
                </n-form-item>
              </div>
            </n-form>
          </NSpin>
        </NScrollbar>
      </div>
    </div>
    <div class="form-bottom">
      <div class="btn-list">
        <n-button @click="handleReset">取消</n-button>
        <n-button @click="handleSubmit">暂存</n-button>
        <n-button
          type="primary"
          @click="handleSubmit"
        >
          确定
        </n-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, onUpdated, onBeforeUpdate, watch } from 'vue'
import { useMessage, NScrollbar } from 'naive-ui'

import dayjs from 'dayjs'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { sendRequest } from '@/utils/api'
import ApproveProcess from '@/components/Approve/approveProcess.vue'
import { useTagStore } from '@/stores/layout'
import {
  NForm,
  NFormItem,
  NInput,
  NInputNumber,
  NSelect,
  NDatePicker,
  NUpload,
  NButton,
  NSpace,
  NGrid,
  NGridItem,
  NSpin
} from 'naive-ui'

const formRef = ref(null)
const message = useMessage()
const formModel = ref({
  type: null,
  workType: null,
  identificationNumber: '',
  subject: '',
  callNumber: '',
  fileName: '',
  collectionName: '',
  collectionCode: '',
  originalCode: '',
  retentionPeriod: null,
  securityLevel: null,
  year: '',
  fileSize: null,
  cataloger: '',
  fileCount: '',
  storageLocation: '',
  description: '',
  remarks: ''
})

const rules = ref<FormRules>({
  type: {
    required: true,
    message: '请选择类型',
    trigger: ['blur', 'change']
  },
  workType: {
    required: true,
    message: '请选择著作类型',
    trigger: ['blur', 'change']
  },
  identificationNumber: {
    required: true,
    message: '请输入著录识别号/条码号',
    trigger: ['blur', 'input']
  },
  subject: {
    required: true,
    message: '请输入主题词',
    trigger: ['blur', 'input']
  },
  callNumber: {
    required: true,
    message: '请输入馆藏书号',
    trigger: ['blur', 'input']
  },
  fileName: {
    required: true,
    message: '请输入计算机文件名',
    trigger: ['blur', 'input']
  },
  collectionName: {
    required: true,
    message: '请输入中华版本收藏主体名称',
    trigger: ['blur', 'input']
  },
  collectionCode: {
    required: true,
    message: '请输入中华版本收藏主体编码',
    trigger: ['blur', 'input']
  },
  originalCode: {
    required: true,
    message: '请输入原始编码',
    trigger: ['blur', 'input']
  },
  retentionPeriod: {
    required: true,
    type: 'number',
    message: '请选择保管期限',
    trigger: ['blur', 'change']
  },
  securityLevel: {
    required: true,
    message: '请选择密级',
    trigger: ['blur', 'change']
  },
  year: {
    required: true,
    message: '请输入年款',
    trigger: ['blur', 'input']
  },
  fileSize: {
    required: true,
    type: 'number',
    message: '请输入计算机文件大小',
    trigger: ['blur', 'change']
  },
  cataloger: {
    required: true,
    message: '请输入著录者',
    trigger: ['blur', 'input']
  },
  fileCount: {
    required: true,
    message: '请输入文件数量',
    trigger: ['blur', 'input']
  },
  storageLocation: {
    required: true,
    message: '请输入存储地址',
    trigger: ['blur', 'input']
  },
  description: {
    required: true,
    message: '请输入内容描述',
    trigger: ['blur', 'input']
  },
  remarks: {
    required: false, // 备注可以是可选的
    message: '请输入备注',
    trigger: ['blur', 'input']
  }
})
const typeOptions = [{ label: '请选择', value: null }]
const workTypeOptions = [{ label: '请选择', value: null }]
const securityLevelOptions = [{ label: '请选择', value: null }]
const handleSubmit = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      message.success('表单提交成功')
      // 这里可以添加提交表单的逻辑
    } else {
      message.error('请填写所有必填字段')
    }
  })
}
const handleReset = () => {
  formModel.value = {
    type: null,
    workType: null,
    identificationNumber: '',
    subject: '',
    callNumber: '',
    fileName: '',
    collectionName: '',
    collectionCode: '',
    originalCode: '',
    retentionPeriod: null,
    securityLevel: null,
    year: '',
    fileSize: null,
    cataloger: '',
    fileCount: '',
    storageLocation: '',
    description: '',
    remarks: ''
  }
}

// const handleReset = () => {
//   router.back() // 返回上一页
// }

onMounted(async () => {
  //   getWorkFlow()
})
</script>

<style scoped lang="scss">
.DigitalCollationAdd {
  position: relative;
  width: 100%;
  height: 100%;
}
.form-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 20px;
  background: #e1e1e1;
  .card-title {
    display: flex;
    align-items: center;
    width: 100%;
    height: 34px;
    color: #1d2129;
    font-size: 24px;
    font-weight: 500;
    line-height: 34px;
    &::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 7px;
      border-radius: 2.5px;
      background: #6cb187;
    }
  }
  .card-line {
    width: 100%;
    height: 1px;
    margin-top: 16px;
    background-color: #fff;
  }
  .card-steps {
    margin: 20px;
  }
  .card-tip {
    display: flex;
    width: 880px;
    margin: 20px 0;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: #f3f8f2;
    color: #4e5969;
    font-size: 14px;
    line-height: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    img {
      width: 16px;
      height: 16px;
    }
    span {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .form-content {
    display: flex;
    justify-content: center;
    width: 100%;
    height: calc(100% - 95px);
    padding-top: 41px;
    .form-container {
      padding: 0 100px;
      //   display: flex;
      //   justify-content: center;
      .top-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
      .bottom-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}
.form-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 55px;
  border-top: 1px solid #f7f8f9;
  //   background: #f0efee;
  background: #ffffff;
  .btn-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    width: 100%;
    height: 100%;
    padding-right: 20px;
  }
}
:deep(.n-form-item) {
  //   width: 500px;
}
:deep(.n-form-item-blank) {
  width: 328px;
}
</style>
